import React from 'react';
import {
  notification,
  Card,
  Breadcrumb,
  Menu,
  Icon,
  Button,
  Row,
  Col,
  Spin,
  Badge,
  Avatar
} from 'antd';
import {
  Router, Route, Link, hashHistory,
} from 'react-router';

const { Meta } = Card;

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
import styles from './Handbook.less'
import { connect } from 'dva';
import config from "../../../config/web.config";
const namespace = 'handbook';
import 'react-quill/dist/quill.snow.css'

import  android from '../../assets/app_android.png'
import  ios from '../../assets/app_ios.png'
import  xcx from '../../assets/cxc_shop.jpeg'
const mapStateToProps = state => {
  return {}
};

const mapDispatchToProps = dispatch => {
  return {
    getNewsDetails2: (callback) => {
      const action = {
        type: `${namespace}/getNewsDetails2`,
        payload: {
          state: '0',
          page: '0',
          pagesize: '1000',
          callback:callback
        },
      };
      dispatch(action);
    },

    getNewsDetail: (id,callback) => {
      const action = {
        type: `${namespace}/getNewsDetail`,
        payload: {
          id: id,
          callback:callback
        },
      };
      dispatch(action);
    },
  };
};
@connect(
  mapStateToProps,
  mapDispatchToProps
)
export default class Handbook extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      arrSection:[],
      index:0,
      key:'注册',
      item:{},
      isLoading:true,
      detail:{}
    };

  }

  componentDidMount() {

    this.props.getNewsDetails2(res=>{
      var arr0 = []
      var arr1 = []
      var arr2 = []
      var arr = []
      for(var i=0;i<res.length;i++){
        var item = res[i]
        if(item.category.type == '0'){
          arr0.push(item)
        }else if(item.category.type == '1'){
          arr1.push(item)
        }else if(item.category.type == '2'){
          arr2.push(item)
        }
      }
      arr.push(arr0)
      arr.push(arr1)
      arr.push(arr2)
      this.setState({arrSection:arr,isLoading:false})
    })
  }



  render() {
    var that = this
    const antIcon = <Icon type="loading" style={{fontSize: 24}} spin/>;
    const none = <Spin indicator={antIcon}/>;

    const download =
      (<div>
        <Row className={styles.row} gutter={10}>
          <Col span={2}>
            <span className={styles.desc}>苹果</span>
          </Col>
          <Col span={6}>
            <img src={ios} />
          </Col>
          <Col span={2}>
            <span className={styles.desc}>安卓</span>
          </Col>
          <Col span={6}>
            <img  src={android}/>
          </Col>
          <Col span={2}>
            <span className={styles.desc}>小程序</span>
          </Col>
          <Col span={6}>
            <img  src={xcx}/>
          </Col>
        </Row>
        <Row className={styles.row} gutter={10}>
          <p className={styles.desc}>汽修小助手是面向中小汽修门店，提供客户管理，工单管理，进销存，到期提醒，活动发布，等简洁实用的功能服务。</p>
        </Row>


      </div>)



    const data = <Card className={styles.handbookroot}
                       title={"汽修小助手操作手册"}>
                  {download}
                  <Menu
        onSelect={(item) => {

        }}
        onClick={(item, key) => {
          that.setState({
            index: parseInt(item.keyPath[1]),
            key: item.keyPath[0]
          }, () => {
            var arr = that.state.arrSection[that.state.index]
            for (var i = 0; i < arr.length; i++) {
              if (that.state.key == arr[i].title) {
                var _item = arr[i]
                that.props.getNewsDetail(_item._id,detail=>{
                  that.setState({item: detail})
                })
              }
            }
          });
        }}
        defaultOpenKeys={['0']}
        theme={"dark"}
        mode={"horizontal"}
      >
                    <SubMenu key="0" title={<span className={styles.menutitle}>app端{this.state.arrSection[0] == undefined ?'':(' ('+this.state.arrSection[0].length+')')}</span> }>
          {
            this.state.arrSection.length > 0 ? this.state.arrSection[0].map(item => {
              return <Menu.Item key={item.title}>{item.title}</Menu.Item>
            }) : null
          }
        </SubMenu>
        <SubMenu key="1" title={<span><span className={styles.menutitle}>电脑端{this.state.arrSection[1] == undefined ?'':(' ('+this.state.arrSection[1].length+')')}</span></span>}>
          {
            this.state.arrSection.length > 1 ? this.state.arrSection[1].map(item => {
              return <Menu.Item key={item.title}>{item.title}</Menu.Item>
            }) : null
          }
        </SubMenu>

        <SubMenu key="2" title={<span><span className={styles.menutitle}>小程序端{this.state.arrSection[2] == undefined ?'':(' ('+this.state.arrSection[2].length+')')}</span></span>}>
          {
            this.state.arrSection.length > 2 ? this.state.arrSection[2].map(item => {
              return <Menu.Item key={item.title}>{item.title}</Menu.Item>
            }) : null
          }
        </SubMenu>

      </Menu>
                  <span dangerouslySetInnerHTML={{__html: this.state.item.html}}/>
                 </Card>

    return (that.state.isLoading ? none : data);
  }
}
